<template>
  <view class="container">
    <!-- 拍照上传界面 -->
    <view class="section section-one">
      <!-- 展示选择或拍摄的图片 -->
      <view class="image-container">
        <image
          v-if="imagePath"
          :src="imagePath"
          mode="aspectFit"
          class="preview-image"
          @click="previewImage"
        ></image>
        <view v-else class="placeholder">
          <text>上传图片展示</text>
        </view>
      </view>
      <!-- 拍摄和从相册选择按钮 -->
      <view class="button-group">
        <button class="custom-button" @click="takePhoto">拍摄</button>
        <button class="custom-button" @click="chooseFromAlbum">从相册选择</button>
		<button class="custom-button" @click="Taobao">淘宝导入</button>
      </view>
      
      <!-- 图片识别信息弹窗 -->
      <view v-if="showAnalysisPopup" class="analysis-popup">
        <view class="analysis-popup-mask" @tap="closeAnalysisPopup"></view>
        <view class="analysis-popup-content">
          <view class="popup-header">
            <text>衣物信息编辑</text>
            <text class="close-btn" @tap="closeAnalysisPopup">×</text>
          </view>
          
          <!-- 基本信息 -->
		<!-- 衣服大类选择器 -->
		<view class="form-item">
		  <text class="label">衣服大类:</text>
		  <view class="category-select" @tap="openMainCategoryPicker">
			<text>{{ selectedMainCategory || '请选择衣服大类' }}</text>
		  </view>
		</view>

		<!-- 详细类别选择器 -->
		<view class="form-item">
		  <text class="label">详细类别:</text>
		  <view class="category-select" @tap="openSubCategoryPicker" :class="{ 'disabled': !selectedMainCategory }">
			<text>{{ selectedSubCategory || (selectedMainCategory ? '请选择详细类别' : '请先选择衣服大类') }}</text>
		  </view>
		</view>

		<!-- 衣服大类选择弹窗 -->
		<view v-if="showMainCategoryPicker" class="custom-picker">
		  <view class="custom-picker-mask" @tap="closeMainCategoryPicker"></view>
		  <view class="custom-picker-content">
			<view class="picker-header">
			  <text>选择衣服大类</text>
			  <text @tap="closeMainCategoryPicker" class="close-btn">×</text>
			</view>
			<scroll-view scroll-y class="picker-options">
			  <view 
				v-for="(item, index) in mainCategories" 
				:key="index"
				class="picker-option"
				:class="{ 'selected': selectedMainCategoryIndex === index }"
				@tap="selectMainCategory(index)"
			  >
				<text>{{ item }}</text>
			  </view>
			</scroll-view>
		  </view>
		</view>

		<!-- 详细类别选择弹窗 -->
		<view v-if="showSubCategoryPicker" class="custom-picker">
		  <view class="custom-picker-mask" @tap="closeSubCategoryPicker"></view>
		  <view class="custom-picker-content">
			<view class="picker-header">
			  <text>选择详细类别</text>
			  <text @tap="closeSubCategoryPicker" class="close-btn">×</text>
			</view>
			<scroll-view scroll-y class="picker-options">
			  <view 
				v-for="(item, index) in subCategories" 
				:key="index"
				class="picker-option"
				:class="{ 'selected': selectedSubCategoryIndex === index }"
				@tap="selectSubCategory(index)"
			  >
				<text>{{ item }}</text>
			  </view>
			</scroll-view>
		  </view>
		</view>
          
          <view class="form-item">
            <text class="label">颜色:</text>
            <input v-model="analysisResult.color" placeholder="输入颜色" />
          </view>
          
          <view class="form-item">
            <text class="label">材质:</text>
            <input v-model="analysisResult.material" placeholder="输入材质" />
          </view>
          
          <view class="form-item">
            <text class="label">尺码:</text>
            <input v-model="analysisResult.size" placeholder="输入尺码" />
          </view>
          <view class="form-item">
            <text class="label">版型:</text>
            <input v-model="analysisResult.fit" placeholder="输入版型" />
          </view>
		  <view class="form-item">
		    <text class="label">季节:</text>
		    <input v-model="analysisResult.season" placeholder="输入季节" />
		  </view>
		  <view class="form-item">
		    <text class="label">品牌:</text>
		    <input v-model="analysisResult.brand" placeholder="输入品牌/无" />
		  </view>
          <!-- 标签部分 -->
          <view class="tag-section">
            <text class="label">标签:</text>
            <view class="tag-container">
              <view
                v-for="(tag, idx) in analysisResult.tags"
                :key="idx"
                class="tag"
              >
                <text>{{ tag }}</text>
                <text class="delete-tag" @tap.stop="deleteAnalysisTag(idx)">×</text>
              </view>
              <view v-if="!isAddingTag" class="add-tag" @tap.stop="startAddingTag">
                <text>+ 添加标签</text>
              </view>
              <input
                v-if="isAddingTag"
                v-model="newTag"
                placeholder="输入标签(如:休闲/正式)"
                @confirm="addAnalysisTag"
                @blur="addAnalysisTag"
                :focus="isAddingTag"
                class="tag-input"
              />
            </view>
            <view v-if="analysisResult.tags.length === 0" class="empty-tip">
              <text>请添加标签(如:休闲/正式/嘻哈等)</text>
            </view>
          </view>
          <button class="confirm-btn" @tap="saveAnalysisResult">确认保存</button>
        </view>
		
		<picker
		        v-if="showCategoryPicker"
		        mode="selector"
		        :range="categoryOptions"
		        @change="onCategoryChange"
		        @cancel="showCategoryPicker = false"
		        class="fullscreen-picker"
		      ></picker>
			  
      </view>
    </view>


    <!-- 第二部分：衣服展示窗口 -->
    <view class="section section-two">
		<view class="simple-group">
		  <view class="simple-item">
		    <text class="title">我的衣柜</text>
		  </view>
		</view>
		
      <!-- 外层上下滑动 -->
      <scroll-view class="outer-scroll" scroll-y="true">
        <view
          class="clothes-category"
          v-for="(clothes, index) in clothesCategories"
          :key="index"
        >
          <!-- 类别标题 -->
          <view class="category-title">{{ clothes.name }}</view>
          <!-- 类别下的衣物展示，横向滚动 -->
          <scroll-view class="category-items" scroll-x="true">
            <view class="clothes-images">
              <view
                class="clothes-item"
                v-for="(item, idx) in clothes.items"
                :key="idx"
                @click="showDetail(item)"
              >
                <image :src="item.image_url" class="clothes-image" />
              </view>
            </view>
          </scroll-view>
        </view>
      </scroll-view>
	  
	  <view class="button-group">
	    <button @click="goto_data_analysis" class="custom-button">数据分析</button>
	    <button @click="goToHistory" class="custom-button">历史穿搭</button>
	  </view>

	   

    </view>

	   
  </view>
</template>



<script>
import setting from "../../setting"

export default {
  data() {
    return {
      imagePath: "",
      userId: null,
      clothesCategories: [],

      // 衣服大类数据
      mainCategories: ["上衣", "裤子", "裙子", "鞋子", "其他"],
      selectedMainCategory: "",
      selectedMainCategoryIndex: -1,
      showMainCategoryPicker: false,

      // 详细类别数据（根据大类动态变化）
      subCategories: [],
      selectedSubCategory: "",
      selectedSubCategoryIndex: -1,
      showSubCategoryPicker: false,

      // 所有详细类别数据
      allSubCategories: {
        上衣: [
          "毛衣",
          "衬衣",
          "短袖",
          "吊带",
          "长袖",
          "外套",
          "西装外套",
          "卫衣",
          "长羽绒服",
          "短羽绒服",
          "大衣",
          "冲锋衣",
        ],
        裤子: ["牛仔裤", "休闲裤", "运动裤", "短裤", "加绒裤", "西裤", "工装裤", "背带裤"],
        裙子: ["连衣裙", "半身裙", "长裙", "短裙", "加绒裙"],
        鞋子: ["运动鞋", "皮鞋", "凉鞋", "雪地靴", "靴子", "板鞋", "布鞋", "高跟鞋", "保暖鞋"],
        其他: ["首饰", "帽子", "围巾", "包包", "墨镜", "领带"],
      },

      // 弹窗相关数据
      showAnalysisPopup: false,
      showCategoryPicker: false,
      analysisResult: {
        mainCategory: "", // 新增：衣服大类
        subCategory: "", //修改category: '', // 类别：上衣/裤子等
        color: "",
        material: "",
        size: "",
        fit: "",
        season: "",
        brand: "",
        tags: [], // 标签：休闲/正式等
      },
      isAddingTag: false,
      newTag: "",

      showCustomPicker: false, // 控制自定义选择器显示
      selectedCategoryIndex: -1, // 当前选中的类别索引

      selectedItems: {
        customTags: [], // 初始化为空数组
      },

      isImageZoomed: false, // 控制图片是否放大
    }
  },
  created() {
    this.userId = uni.getStorageSync("user_id") // 获取存储的 user_id
    console.log(this.userId) // 打印出来查看
    this.loadClothesData()
  },
  methods: {
    // 打开自定义选择器
    openCustomPicker() {
      this.showCustomPicker = true
      this.selectedCategoryIndex = this.categoryOptions.indexOf(this.analysisResult.category)
    },

    // 关闭自定义选择器
    closeCustomPicker() {
      this.showCustomPicker = false
    },

    // 选择类别
    selectCategory(index) {
      this.analysisResult.category = this.categoryOptions[index]
      this.closeCustomPicker()
    },

    // 打开选择方式弹窗
    openSelector() {
      this.showSelector = true
    },
    // 关闭选择方式弹窗
    closeSelector() {
      this.showSelector = false
    },

    // 衣服大类相关方法
    openMainCategoryPicker() {
      this.showMainCategoryPicker = true
    },
    closeMainCategoryPicker() {
      this.showMainCategoryPicker = false
    },
    selectMainCategory(index) {
      this.selectedMainCategory = this.mainCategories[index]
      this.selectedMainCategoryIndex = index
      this.selectedSubCategory = "" // 重置详细类别选择
      this.subCategories = this.allSubCategories[this.selectedMainCategory] || []
      this.analysisResult.mainCategory = this.selectedMainCategory // 保存到analysisResult
      this.closeMainCategoryPicker()
    },

    // 详细类别相关方法
    openSubCategoryPicker() {
      if (!this.selectedMainCategory) return
      this.showSubCategoryPicker = true
    },
    closeSubCategoryPicker() {
      this.showSubCategoryPicker = false
    },
    selectSubCategory(index) {
      this.selectedSubCategory = this.subCategories[index]
      this.selectedSubCategoryIndex = index
      this.analysisResult.subCategory = this.selectedSubCategory // 保存到analysisResult
      this.closeSubCategoryPicker()
    },

    // 拍照
    takePhoto() {
      this.closeSelector();
      uni.chooseImage({
        count: 1, // 只能拍摄一张照片
        sourceType: ['camera'], // 直接从摄像头拍摄
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0];
          this.imagePath = tempFilePath;
          this.uploadAndAnalyzeImage(); // 明确调用上传函数
        },
        fail: (err) => {
          console.log('拍照失败', err);
          uni.showToast({ title: '拍照失败，请重试', icon: 'none' });
        },
      });
    },
    // 检查摄像头权限并拍照
    checkPermissionAndTakePhoto() {
      // 检查是否有摄像头权限
      navigator.mediaDevices
        .getUserMedia({ video: true })
        .then(() => {
          // 有权限，调用拍照功能
          this.takePhoto()
        })
        .catch(() => {
          // 无权限，提示用户
          uni.showToast({
            title: "请允许使用摄像头",
            icon: "none",
          })
        })
    },
    // 从相册选择
    chooseFromAlbum() {
      this.closeSelector();
      uni.chooseImage({
        count: 1, // 最多选择只能拍摄一张照片
        sourceType: ['album'], // 从相册选择
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0];
          this.imagePath = tempFilePath;
          console.log(this.imagePath);
          this.uploadAndAnalyzeImage(); // 明确调用上传函数
        },
        fail: (err) => {
          console.log('选择照片失败', err);
          uni.showToast({ title: '选择照片失败，请重试', icon: 'none' });
        },
      });
    },

    // 淘宝导入
    Taobao(outfit) {
      uni.showToast({
        title: "淘宝导入功能开发中",
        icon: "none",
      })
    },

    // 上传图片并分析
    async uploadAndAnalyzeImage() {
      if (!this.imagePath) {
        uni.showToast({ title: "请先选择图片", icon: "none" })
        return
      }

      uni.showLoading({ title: "分析中...", mask: true })

      try {
        // 使用uni.uploadFile直接上传文件，而不是尝试读取为base64
        const uploadResult = await new Promise((resolve, reject) => {
          uni.uploadFile({
            url: `${setting.url}/api/analyze-image`,
            filePath: this.imagePath,
            name: "image",
            formData: {
              user_id: this.userId,
            },
            success: (res) => {
              if (res.statusCode === 200) {
                let data = JSON.parse(res.data)
                resolve(data)
              } else {
                reject(new Error("上传失败"))
              }
            },
            fail: (err) => {
              console.error("上传失败:", err)
              reject(err)
            },
          })
        })

        // 解析后端返回的数据
        const resData = uploadResult
        if (resData.message !== "图片分析成功" || !resData.data) {
          throw new Error(resData.message || "分析结果无效")
        }

        const backendData = resData.data

        // 设置大类和子类别
        const mainCategory = backendData["大类"] || "未知"
        const subCategory = backendData["子类别"] || "未知"

        // 查找大类在数组中的索引
        const mainCategoryIndex = this.mainCategories.findIndex((category) => category === mainCategory)

        // 如果找到了大类，设置选中状态
        if (mainCategoryIndex !== -1) {
          this.selectedMainCategory = mainCategory
          this.selectedMainCategoryIndex = mainCategoryIndex

          // 更新子类别列表
          this.subCategories = this.allSubCategories[mainCategory] || []

          // 查找子类别在数组中的索引
          const subCategoryIndex = this.subCategories.findIndex((category) => category === subCategory)

          // 如果找到了子类别，设置选中状态
          if (subCategoryIndex !== -1) {
            this.selectedSubCategory = subCategory
            this.selectedSubCategoryIndex = subCategoryIndex
          } else {
            // 如果子类别不在预定义列表中，但后端返回了有效值
            if (subCategory !== "未知") {
              // 可以选择添加到子类别列表中
              this.subCategories.push(subCategory)
              this.selectedSubCategory = subCategory
              this.selectedSubCategoryIndex = this.subCategories.length - 1
            } else {
              this.selectedSubCategory = ""
              this.selectedSubCategoryIndex = -1
            }
          }
        } else {
          // 如果大类不在预定义列表中，但后端返回了有效值
          if (mainCategory !== "未知") {
            // 可以选择添加到大类列表中
            this.mainCategories.push(mainCategory)
            this.selectedMainCategory = mainCategory
            this.selectedMainCategoryIndex = this.mainCategories.length - 1

            // 创建新的子类别列表
            this.allSubCategories[mainCategory] = [subCategory]
            this.subCategories = this.allSubCategories[mainCategory]
            this.selectedSubCategory = subCategory
            this.selectedSubCategoryIndex = 0
          } else {
            this.selectedMainCategory = ""
            this.selectedMainCategoryIndex = -1
            this.selectedSubCategory = ""
            this.selectedSubCategoryIndex = -1
            this.subCategories = []
          }
        }

        // 保存分析结果
        this.analysisResult = {
          mainCategory: mainCategory,
          subCategory: subCategory,
          color: backendData["颜色"] || "未知",
          material: backendData["材质"] || "未知",
          fit: backendData["版型"] || "未知",
          season: backendData["季节"] || "未知",
          tags: [], // 可以根据需要从后端获取或本地生成
        }

        this.showAnalysisPopup = true
        uni.hideLoading()
      } catch (error) {
        uni.hideLoading()
        console.log("分析出错:", error)
        uni.showToast({
          title: error.message || "分析失败，请重试",
          icon: "none",
        })
      }
    },
    // 类别选择
    onCategoryChange(e) {
      this.analysisResult.category = this.categoryOptions[e.detail.value]
      this.showCategoryPicker = false
    },

    // 标签相关方法
    startAddingTag() {
      this.isAddingTag = true
    },

    addAnalysisTag() {
      const tag = this.newTag.trim()
      if (tag) {
        if (!this.analysisResult.tags.includes(tag)) {
          this.analysisResult.tags.push(tag)
          this.newTag = ""
        } else {
          uni.showToast({ title: "该标签已存在", icon: "none" })
        }
      }
      this.isAddingTag = false
    },

    deleteAnalysisTag(index) {
      this.analysisResult.tags.splice(index, 1)
    },

    // 关闭弹窗
    closeAnalysisPopup() {
      this.showAnalysisPopup = false
    },

    // 保存数据
    async saveAnalysisResult() {
      try {
        uni.showLoading({ title: "保存中...", mask: true })

        // 1. 先上传图片
        const imageUrl = await this.uploadImage()

        // 2. 保存衣物信息
        const response = await uni.request({
          url: `${setting.url}/api/save_clothes`,
          method: "POST",
          header: { "Content-Type": "application/json" },
          data: {
            user_id: this.userId,
            category: this.analysisResult.mainCategory,
            subcategory: this.analysisResult.subCategory,
            color: this.analysisResult.color,
            material: this.analysisResult.material,
            size: this.analysisResult.size,
            fit: this.analysisResult.fit,
            season: this.analysisResult.season || "四季",
            image_url: imageUrl, // 使用上传后的URL
            tags: this.analysisResult.tags,
            brand: this.analysisResult.brand,
          },
        })

        if (response.statusCode !== 200) {
          throw new Error(response.data.error || "保存失败")
        }

        uni.showToast({ title: "保存成功", icon: "success" })
        this.closeAnalysisPopup()
        this.loadClothesData() // 刷新衣柜数据
      } catch (error) {
        uni.showToast({ title: error.message || "保存失败", icon: "none" })
        console.error("保存失败:", error)
      } finally {
        uni.hideLoading()
      }
    },

 async uploadImage() {
      try {
        console.log("开始上传图片...")

        // 直接使用uni.uploadFile上传文件
        const uploadRes = await new Promise((resolve, reject) => {
          uni.uploadFile({
            url: `${setting.url}/api/upload-file`,
            filePath: this.imagePath,
            name: "image",
            formData: {
              type: "clothes",
              user_id: this.userId,
            },
            success: (res) => {
              if (res.statusCode === 200) {
                let data = JSON.parse(res.data)
                resolve(data)
              } else {
                reject(new Error("上传失败"))
              }
            },
            fail: (err) => {
              console.error("上传失败:", err)
              reject(err)
            },
          })
        })

        console.log("上传响应:", uploadRes)

        if (uploadRes.file_url) {
          let fileUrl = uploadRes.file_url
          console.log("上传成功，文件URL:", fileUrl)

          // 确保URL是完整的
          if (!fileUrl.startsWith("http") && !fileUrl.startsWith("/")) {
            fileUrl = `${setting.url}/${fileUrl}`
            console.log("修正后的文件URL:", fileUrl)
          }

          return fileUrl
        } else {
          console.error("上传失败:", uploadRes)
          throw new Error(uploadRes.message || "图片上传失败")
        }
      } catch (error) {
        console.error("图片上传错误:", error)
        throw new Error("图片上传失败")
      }
    },
    // 预览图片
    previewImage() {
      uni.previewImage({
        urls: [this.imagePath], // 需要预览的图片路径
        current: 0, // 当前显示图片的索引
      })
    },

    // 获取衣物数据
async fetchClothesData() {
  return uni.request({
    method: "GET",
    url: `${setting.url}/api/clothes`,
  })
  .then((response) => {
    const data = response.data
    if (data && data.length > 0) {
      data.forEach(item => {
        if (item.image_url) {
          // 处理不同类型的URL
          if (item.image_url.startsWith('blob:')) {
            // 保留本地的Blob URL不做处理
          } 
          else if (item.image_url.startsWith('/uploads/')) {
            // 服务器上的图片添加服务器地址前缀
            item.image_url = `${setting.url}${item.image_url}`
          }
          else if (!item.image_url.startsWith('http')) {
            // 其他相对路径情况
            item.image_url = `${setting.url}/uploads/clothes/${item.image_url}`
          }
        } else {
        }
      })
    }
    return data
  })
  .catch((error) => {
    console.error("请求衣物数据时出错:", error)
    throw error
  })
},
    //格式化衣物数据
    formatClothesData(data) {
      const categories = []

      // 遍历数据并过滤当前用户的衣物
      data.forEach((item) => {
        if (item.user_id === this.userId) {
          // 过滤只显示当前用户的衣物
          let category = categories.find((c) => c.name === item.category)
          if (!category) {
            category = { name: item.category, items: [] }
            categories.push(category)
          }
          category.items.push(item)
        }
      })

      return categories
    },

    // 加载并格式化衣物数据
    async loadClothesData() {
      try {
        uni.showLoading({ title: "加载衣柜中...", mask: true })
        // 获取衣物数据，并等待异步操作完成
        const clothesData = await this.fetchClothesData()
        // 格式化衣物数据
        this.clothesCategories = this.formatClothesData(clothesData)
        uni.hideLoading()
      } catch (error) {
        uni.hideLoading()
        console.log("加载衣物数据时出错:", error)
        uni.showToast({ title: "加载衣柜失败，请重试", icon: "none" })
      }
    },

    // 展示详细信息
    showDetail(item) {
      // 确保item对象包含clothes_id
      if (!item || !item.clothes_id) {
        uni.showToast({ title: "衣物数据异常", icon: "none" })
        return
      }

      uni.navigateTo({
        url: `/pages/ClothesDetail/ClothesDetail?id=${item.clothes_id}`,
        success: () => {
          console.log("跳转详情页成功，衣物ID:", item.clothes_id)
        },
        fail: (err) => {
          console.error("跳转详情页失败:", err)
        },
      })
    },
    // 开始添加标签
    startAddingTag() {
      this.isAddingTag = true
    },
    // 添加标签
    async addTag() {
      const tag = this.newTag.trim()

      if (tag) {
        // 检查标签是否已经存在，避免重复添加
        if (!this.selectedItem.customTags.includes(tag)) {
          this.selectedItem.customTags.push(tag)
          console.log(tag)

          try {
            // 发送请求更新后端数据
            await uni.request({
              method: "POST",
              url: `${setting.url}/api/clothes/${this.selectedItem.clothes_id}/tags`,
              data: { tag: tag },
            })
          } catch (error) {
            console.log("添加标签时出错:", error)
          }
        } else {
          console.log("标签已经存在")
        }
      }

      this.newTag = "" // 清空输入框
      this.isAddingTag = false // 关闭输入框
    },
    // 删除标签
    async deleteTag(index) {
      const deletedTag = this.selectedItem.customTags.splice(index, 1)[0]

      // 发送请求更新后端数据
      try {
        await uni.request({
          method: "DELETE",
          url: `${setting.url}/api/clothes/${this.selectedItem.clothes_id}/tags`,
          data: {
            tag: deletedTag,
          },
        })
      } catch (error) {
        console.log("删除标签时出错:", error)
      }
    },

    // 获取日期的差值
    getDaysAgo(lastWorn) {
      const today = new Date()
      const lastWornDate = new Date(lastWorn)
      const diffTime = today - lastWornDate
      const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24))
      return `${diffDays} 天前`
    },
    // 关闭详细信息窗口
    closeDetail() {
      this.isDetailVisible = false
    },
    // 导航到数据分析页面
    goto_data_analysis() {
      uni.navigateTo({
        url: "/pages/Data-Analysis/Data-Analysis",
      })
    },

    // 处理图片放大
    zoomImage() {
      this.isImageZoomed = true
    },
    // 关闭放大的图片
    closeZoomedImage() {
      this.isImageZoomed = false
    },

    goToHistory() {
      //更新第一部分，当点击其他功能时预览图片消息
      this.imagePath = ""
      // 跳转到历史穿搭方案页面
      uni.navigateTo({
        url: "/pages/History/History",
      })
    },
    
    // 添加图片加载错误处理方法
    handleImageError(e, item) {
      console.error(`图片加载失败: ${item.image_url}`, e)
      // 可以设置一个默认图片
      // item.image_url = '/static/default-clothes.png'
    }
  },
}

</script>
	
		
<style scoped>
.container {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}

.section {
  margin-bottom: 20rpx;
  justify-content: space-between;
  overflow: hidden;
}


.section-one {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.5);
  border-radius: 20rpx;
  padding: 20rpx;
}
/* 图片预览样式 */
.preview-image {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 保持比例并适应容器 */
  border-radius: 10rpx;
}
.image-container {
  width: 100%;
  height: 300rpx; /* 根据需要调整高度 */
  border: 1rpx dashed #ccc;
  border-radius: 10rpx;
  display: flex;
	align-items: center; /* 垂直居中 */
	justify-content: center; /* 水平居中 */
  margin-bottom: 20rpx;
    overflow: hidden; /* 防止图片超出容器 */
}
.placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 24rpx;
}
.button-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-top: 20rpx;
  margin-bottom: 10rpx;
}
.custom-button {
  width: 200rpx;
  height: 60rpx;
  background-color: #FFF200; /* 主题色 */
  color: black;
  font-size: 24rpx;
  border-radius: 10rpx;
  margin: 0 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1rpx solid black;
  box-shadow: 4rpx 4rpx 3rpx rgba(0, 0, 0, 0.3);
}
.custom-button:active {
  background-color: #FFC90E; /* 按下时变深色 */
}
/* 弹窗样式 */
.analysis-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1001;
  display: flex;
  justify-content: center;
  align-items: center;
}

.analysis-popup-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.analysis-popup-content {
  position: relative;
  z-index: 1000;
  background-color: white;
  width: 80%;
  max-width: 600rpx;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.2);
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
  font-size: 32rpx;
  font-weight: bold;
}

.close-btn {
  font-size: 40rpx;
  color: #999;
  padding: 10rpx 20rpx;
}

/* 表单样式 */
.form-item {
  margin-bottom: 25rpx;
  display: flex;
  align-items: center;
}

.label {
  width: 120rpx;
  font-size: 28rpx;
  color: #333;
}

input, .category-select {
  flex: 1;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  padding: 15rpx;
  font-size: 28rpx;
}

.category-select {
  color: #333;
}

/* 标签样式 */
.tag-section {
  margin-top: 30rpx;
}

.tag-container {
  margin-top: 15rpx;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.tag {
  display: flex;
  align-items: center;
  padding: 8rpx 16rpx;
  margin: 4rpx;
  background-color: #f0f0f0;
  border-radius: 8rpx;
  font-size: 24rpx;
}

.delete-tag {
  margin-left: 8rpx;
  color: #ff4d4f;
  font-size: 24rpx;
  cursor: pointer;
}

.add-tag {
  display: flex;
  align-items: center;
  padding: 8rpx 16rpx;
  margin: 4rpx;
  background-color: #e0e0e0;
  border-radius: 8rpx;
  font-size: 24rpx;
  color: #666;
}

.tag-input {
  padding: 8rpx 16rpx;
  margin: 4rpx;
  border: 1rpx solid #ccc;
  border-radius: 8rpx;
  font-size: 24rpx;
  width: 100%;
}

.empty-tip {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

/* 按钮样式 */
.confirm-btn {
  margin-top: 40rpx;
  background-color: #FFF200;
  color: black;
  border: 1rpx solid black;
  border-radius: 10rpx;
  padding: 15rpx;
  font-size: 28rpx;
  text-align: center;
}

/* 自定义选择器样式 */
.custom-picker {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1002;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.custom-picker-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.custom-picker-content {
  width: 100%;
  max-height: 60vh;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  overflow: hidden;
  z-index: 1003;
}

.picker-header {
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1rpx solid #eee;
  font-size: 32rpx;
}

.close-btn {
  font-size: 40rpx;
  padding: 10rpx 20rpx;
}

.picker-options {
  max-height: 50vh;
}

.picker-option {
  padding: 25rpx 20rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.picker-option.selected {
  color: #FFC90E;
  background-color: #fafafa;
}

.picker-option:active {
  background-color: #f0f0f0;
}

.section-two {
  flex: 1;
  padding-top: 5rpx;
  padding-bottom: 20rpx;
  height: 38vh; 
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.4);
  border-radius: 10rpx;
}

.simple-group {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  width: 80%;
  margin: 0 auto;
  border-radius: 12px;
  background: #fff;
}

.simple-item {
  padding: 16px;
  text-align: center;
}

.title {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}


.outer-scroll {
  height: 100%; /* 占据整个父容器的高度 */
  overflow-y: auto; /* 允许垂直滚动 */
}
.clothes-category {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}
.category-title {
  padding: 2%;
  width: 4%;
  font-size: 20rpx;
  font-weight: bold;
  margin-right: 5rpx;
  text-align: center;
  color: #FFC90E; 
}
.category-items {
  flex: 1; /* 占据剩余空间 */
  display: flex;
  overflow-x: auto; /* 横向滚动 */
}
.clothes-images {
  display: flex;
  flex-wrap: nowrap;/* 防止换行 */
}
.clothes-item {
  margin-right: 20rpx;
  position: relative;
}
.clothes-image {
  width: 180rpx;
  height: 180rpx;
  object-fit: cover;
  border-radius: 8rpx;
}
.detail-popup {
  position: fixed;
  color: chocolate;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.detail-popup-content {
  background-color: white;
  border-radius: 10rpx;
  padding: 20rpx;
  width: 100%;
  max-width: 500rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}
.detail-image {
  width: 450rpx;
  height: 450rpx;
  object-fit:cover;
  border-radius: 10rpx;
}
.detail-info {
  margin: 20rpx;
}
.detail-item {
  margin-bottom: 10rpx;
}

/* 标签容器 */
.tag-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* 标签样式 */
.tag {
  display: flex;
  align-items: center;
  padding: 8rpx 16rpx;
  margin: 4rpx;
  background-color: #f0f0f0;
  border-radius: 8rpx;
  position: relative;
}

/* 删除按钮样式 */
.delete-tag {
  margin-left: 8rpx;
  color: #ff4d4f;
  font-size: 24rpx;
  cursor: pointer;
}

/* 添加标签的加号样式 */
.add-tag {
  display: flex;
  align-items: center;
  padding: 8rpx 16rpx;
  margin: 4rpx;
  background-color: #e0e0e0;
  border-radius: 8rpx;
  cursor: pointer;
  font-size: 24rpx;
}

/* 输入框样式 */
.tag-input {
  padding: 8rpx 16rpx;
  margin: 4rpx;
  border: 1rpx solid #ccc;
  border-radius: 8rpx;
  outline: none;
  font-size: 24rpx;
}


.zoomed-image-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明遮罩 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* 确保弹窗在最上层 */
}
.zoomed-image-container {
  position: relative;
  background-color: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.2);
}
.zoomed-image {
  max-width: 100%;
  max-height: 100%;
  display: block;
  border-radius: 8rpx;
  aspect-ratio: 1 / 1;  /* 使宽高比为1:1 */
  object-fit: cover;  /* 图像填充并保持比例*/
}


.btn{
	border: 1rpx solid black;
	background-color: #FFF200;
	border-radius: 10rpx;
	color: black;
	cursor: pointer;
	font-size:24rpx;
	margin-top: 5rpx;
	width:60%;
	box-shadow: 4rpx 4rpx 3rpx rgba(0, 0, 0, 0.3);  
}
.btn:active {
  background-color: #FFC90E; /* 按下时变深色 */
}

.analysis-btn {
  position: fixed;
  right: 20rpx;
  bottom: 90rpx;
  width: 120rpx;
  height: 120rpx;
  background-color: #FFF200;
  color: black;
  font-size: 24rpx;
  border-radius: 50%;
  border: 1rpx solid black;
  box-shadow: 4rpx 4rpx 3rpx rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
